
<template>
  <div class="musicListDetail" v-if='Object.keys(musicListDetail).length'>
    <list-info :detail='musicListDetail' />
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="列表" name="first">
        <DetailTable :musicListDetail='musicListDetail' />
      </el-tab-pane>
      <el-tab-pane label="评论" name="second">
        <Comment scrollObj='.musicListDetail' commentType='musicList' :hotComments='hotComments' :comments='comments' />
        <el-pagination @current-change="handleCurrentChange" :current-page="currentPage" background :page-size="50" layout="prev, pager, next" :total="total">
        </el-pagination>
      </el-tab-pane>
      <el-tab-pane label="收藏" name="third">收藏</el-tab-pane>
    </el-tabs>
    <go-top scrollObj='.musicListDetail' />
  </div>
</template>

<script>
import { reqMusicListDetail, reqMoreMusic, reqmldComment } from '@/network/api'
import { handleMusicTime, formatDate, handleNum, handleDate } from '@/plugins/utils'
import ListInfo from './ListInfo.vue'
import Comment from '@/components/comment/Comment.vue'
import DetailTable from '@/components/detailTable/DetailTable.vue'
import GoTop from '@/components/goTop/GoTop.vue'
import { reactive, onMounted, inject, toRefs } from 'vue'
import { useStore } from 'vuex'
import { useRoute } from 'vue-router'
export default {
  name: 'musicListDetail',
  components: { ListInfo, Comment, DetailTable, GoTop },

  setup() {
    const data = reactive({
      currentPage: 1,
      activeName: 'first',
      hotComments: [],
      totle: 0,
      comments: [],
      musicListDetail: {},
      id: ''
    })
    const store = useStore()
    const state = store.state
    const route = useRoute()
    const msg = inject('$message')
    const getListDetail = async () => {
      const { playlist, code } = await reqMusicListDetail(data.id)
      if (code !== 200) {
        msg.error('请求失败')
        return
      }
      const len = playlist.tracks.length
      let ids = ''
      let songs = []
      if (playlist.trackIds.length > len) {
        playlist.trackIds.forEach((v, i) => {
          if (i > len && i < 100) {
            ids += v.id + ','
          }
        })
        ids = ids.substring(0, ids.length - 1)
      }
      songs = await getMore(ids)
      playlist.tracks.push(...songs)
      playlist.tracks.map(v => {
        v.dt = handleMusicTime(v.dt)
        return v.dt
      })

      playlist.createTime = formatDate(playlist.createTime, 'yyyy-MM-dd')
      playlist.trackCount = handleNum(playlist.trackCount)
      playlist.playCount = handleNum(playlist.playCount)
      data.musicListDetail = playlist
    }
    const getMore = async ids => {
      const { songs } = await reqMoreMusic(ids)
      return songs
    }
    const handleClick = e => {
      if (e.paneName === 'second' && data.comments.length === 0) {
        getComment()
      }
    }
    const getComment = async () => {
      const res = await reqmldComment({
        id: data.id,
        offset: (data.currentPage - 1) * 50,
        limit: 50
      })
      if (res.code === 200) {
        data.totle = res.totle
        data.hotComments = res.hotComments.map(v => {
          v.time = handleDate(v.time)
          return v
        })
        data.comments = res.comments.map(v => {
          v.time = handleDate(v.time)
          return v
        })
      }
    }
    const handleCurrentChange = p => {
      data.currentPage = p
      getComment()
    }
    onMounted(() => {
      data.id = route.params.id
      if (state.isLogin) {
        getIsCreated()
        if (!data.IsCreated) {
          getIsSub()
        }
      }
      getListDetail()
    })
    return {
      ...toRefs(data),
      handleCurrentChange,
      handleClick
    }
  }
}
</script>

<style scoped>
.musicListDetail {
  height: 100%;
  overflow-y: scroll;
}
</style>